---
title: <media-loading-indicator>
description: Media Loading Indicator
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-loading-indicator.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-loading-indicator>` component indicates when the media is buffering. By default, this element is hidden and will only be shown when media loading is stalled.

The component will be updated automatically based on media state and the functionality can be configured.
- The `loadingdelay` attribute to have the loading indicator wait the provided amount of milliseconds before showing.
- What is being displayed can be configured via the `loading` slot.

## Default usage

<SandpackContainer
  css={`/*
 * Force the loading indicator to be visisble.
 * By default, the indicator is hidden and only
 * shown when media loading is stalled.
 * But we wanted this component to be visible
 * for the examples, so, we're forcing it here.
 */
media-loading-indicator {
 --media-loading-indicator-opacity: 1;
}`}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-loading-indicator slot="centered-chrome"></media-loading-indicator>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-loading-indicator>` component using slots.
This is useful if you'd like to use your own custom loading indicator instead of the default one provided by media-chrome.

Here is an example with custom SVGs:

<SandpackContainer
  editorHeight={280}
  css={`/*
 * Force the loading indicator to be visisble.
 * By default, the indicator is hidden and only
 * shown when media loading is stalled.
 * But we wanted this component to be visible
 * for the examples, so, we're forcing it here.
 */
media-loading-indicator {
 --media-loading-indicator-opacity: 1;
}`}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-loading-indicator slot="centered-chrome">
    <svg slot="icon" viewBox="-12 -15 48 60">
      <path d="M0 0h4v10H0z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
      <path d="M10 0h4v10h-4z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0.2s"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
      <path d="M20 0h4v10h-4z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0.4s"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
    </svg>
  </media-loading-indicator>
</media-controller>`}
/>

## Configuring the loading indicator

### Changing the loading delay

It's possible to change how long the loading indicator waits before showing itself when the media state changes to loading.

There are 3 ways of changing the delay: an attribute, a property, or a CSS variable.
All values are in milliseconds.

#### Via an attribute

```html
<media-loading-indicator loadingdelay="1000"></media-loading-indicator>
```

#### Via a property
```js
const loadingIndicator = document.querySelector('media-loading-indicator');

loadingIndicator.loadingDelay = 1000;
```

#### Via a CSS Variable

```css
media-loading-indicator {
 --media-loading-indicator-transition-delay: 1000ms;
}
```

### Making the loading indicator always be visible

It's possible to keep the loading indicator always visible via a CSS variable.
```css
media-loading-indicator {
 --media-loading-indicator-opacity: 1;
}
```

See [the Customize Icons section](#customize-icons) above for this in action.

## Styling with attributes

The `<media-loading-indicator>` will be updated with **media state** attributes depending on the media and playback states.

You can use these attributes to apply custom styles to your `<media-loading-indicator>`. For example, if the media is loading but you want the indicator to be semi-transparent, you can change the opacity like so:

```css
media-loading-indicator[medialoading]:not([mediapaused]) {
  --media-loading-indicator-opacity: 0.75;
}
```
